import Title from "@/components/Title";
import { useMemo } from "react";
import { useState } from "react";

const datas = [
    {
        title: "本地生活推广",
        subTitle: "致美斋",
        desc: "通过「聚宝盆内容生产平台」实现内容批量生成，使用平台自动分发，跑通中台式的内容管理，开拓本地生活服务平台全新的内容运作模式。",
        indicates: [
            {
                title: "线下门店提升",
                desc: "1000+",
            },
            {
                title: "曝光提升",
                desc: "600%+",
            },
            {
                title: "日均新增粉丝",
                desc: "1000+",
            },
        ],
    },
    {
        title: "跨域直播引流",
        subTitle: "百果园",
        desc: "通过「聚宝盆店播盒子」实现跨域直播，在总部直播间定位分店区域，引爆分店区域同城流量，实现总部对分支机构的赋能转化。",
        indicates: [
            {
                title: "线下门店量",
                desc: "1000+",
            },
            {
                title: "月分发视频量",
                desc: "60w+",
            },
            {
                title: "累计引流",
                desc: "20w+",
            },
        ],
    },
    {
        title: "海外内容创作",
        subTitle: "字节无疆",
        desc: "通过「聚宝盆智能生产工具」完成版权内容的二次创作，实现AI内容的批量生产，在Youtubu以及TIKTOK等海外平台变现。",
        indicates: [
            {
                title: "月发布视频量",
                desc: "1000+",
            },
            {
                title: "月总计流量",
                desc: "10000w+",
            },
            {
                title: "单账号月均变现",
                desc: "1000¥+",
            },
        ],
    },
];

const TabPanels = () => {
    const [active, setActive] = useState(0);
    const content = useMemo(() => {
        return datas[active];
    }, [active]);
    return (
        <div className="max-w-7xl w-full phone:px-6 flex flex-col items-center gap-7">
            <div
                className={`flex shrink-0 px-6 phone:px-0 w-full items-start justify-center`}
            >
                {datas.map((item, index) => (
                    <div
                        className={`grow cursor-pointer border-[#2E325D] border [&:not(:first-child)]:border-l-0 text-center text-lg px-6 py-4 ${
                            active === index ? "bg-[#2E325D] text-white" : ""
                        }`}
                        key={index}
                        onClick={() => setActive(index)}
                    >
                        {item.title}
                    </div>
                ))}
            </div>
            <div className="flex items-center laptop:pr-12 bg-[url('/kehujianzheng/bg-sub.png')] bg-cover bg-center bg-no-repeat">
                <div className="flex flex-col gap-10 px-6 phone:px-[7rem] py-12">
                    <div className="relative flex flex-col">
                        <img
                            className="w-10 phone:absolute -top-[1rem] -left-[4rem]"
                            src="/kehujianzheng/commas-left.svg"
                            alt=""
                        />
                        <div className="text-xl font-medium mt-4">
                            {content.subTitle}
                        </div>
                        <div className="text-sm phone:text-base mt-4 leading-8">
                            {content.desc}
                        </div>
                        <img
                            className="self-end w-10 phone:absolute -bottom-[3rem] -right-[4rem]"
                            src="/kehujianzheng/commas-right.svg"
                            alt=""
                        />
                    </div>
                    <div className="flex justify-between py-10">
                        {content.indicates.map((item, index) => (
                            <div
                                className="flex flex-col items-center gap-2 phone:flex-row"
                                key={index}
                            >
                                <img
                                    className="h-[3.6rem] object-scale-down object-center"
                                    src={`/kehujianzheng/icon-${active}-${index}.png`}
                                    alt=""
                                />
                                <div
                                    key={index}
                                    className="flex flex-col items-center phone:items-start"
                                >
                                    <div className="text-sm">{item.title}</div>
                                    <div className="text-2xl font-bold font-serif">
                                        {item.desc}
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
                <img
                    className="hidden laptop:block w-[18rem]"
                    src="/kehujianzheng/photo.png"
                    alt=""
                />
            </div>
        </div>
    );
};

const Kehujianzheng = () => {
    return (
        <div className="phone:pb-[10rem] overflow-hidden flex flex-col items-center phone:bg-[url('/kehujianzheng/bg.png')] bg-cover bg-top bg-no-repeat">
            <Title desc="携手共创内容商业新纪元">客户见证</Title>
            <TabPanels />
        </div>
    );
};

export default Kehujianzheng;
